<template>
  <div ref="baseAttribute" class="base-attribute">
    <div class="attribute-item" v-for="(basisItem, key, index) in selectModel" :key="'attribute-base-' + index">
      <div class="attribute-label">{{ key }}:</div>
      <el-input v-model="basisItem.val" :disabled="basisItem.type === 'text'" />
    </div>
  </div>
</template>

<script setup>
import { Showroom3DStore } from "@/pinia/Showroom3D";
const s3Store = Showroom3DStore();

const attributeObj = ref({
  modelId: { val: '', type: 'text' },
  modelName: { val: '', type: 'input' },
  modelType: { val: '', type: 'text' },
  modelUrl: { val: '', type: 'input' },
  modelStyle: { val: 'mstyle', type: 'text' },
  clsName: { val: 'drag-move-item', type: 'text' },
  bgcolor: { val: '#000', type: 'input' },
  width: { val: '8.88rem', type: 'input' },
  height: { val: '8.88rem', type: 'input' },
  zIndex: { val: 0, type: 'input' },
  offsetX: { val: 0, type: 'input' },
  offsetY: { val: 0, type: 'input' },
  positionX: { val: 0, type: 'input' },
  positionY: { val: 0, type: 'input' },
})

const selectModel = computed(() => {
  if (s3Store.modelObj) {
    Object.keys(attributeObj.value).forEach(key => {
      attributeObj.value[key].val = s3Store.modelObj[key]
    })
  }
  return attributeObj.value
});

const defineAttribute = (obj) => {
  attributeObj.value = obj
}
const saveAttribute = () => {
  let newObj = {}
  Object.keys(attributeObj.value).forEach(key => {
    newObj[key] = attributeObj.value[key].val
  })
  let arr = []
  s3Store.modelList.forEach(element => {
    if (element.modelId === newObj.modelId) {
      element = newObj
    }
    arr.push(element)
  });
  s3Store.setModelList(arr)
  localStorage.setItem('CanvasBox-html-div', JSON.stringify(arr))
};

defineExpose({ attributeObj, saveAttribute, defineAttribute });
const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  emit('closeDrawer')
};
</script>
<style lang="scss">
.base-attribute {
  border-top: 1px solid #317aee;
  background-color: #012747;

  .attribute-label {
    width: 10rem;
    margin-left: 1rem;
  }

  .el-input {
    width: 21rem;
  }

  .el-input.is-disabled .el-input__wrapper {
    background-color: #424242;
    box-shadow: none;
  }

  .attribute-item {
    display: flex;
    line-height: 3rem;
    width: 100%;
    align-items: center;
    font-size: 1.2rem;
    color: #04f3f9;
    padding: 0.5rem 0rem;
    border-bottom: 1px solid #ccc;
  }
}
</style>